<template>
    <div class="imglist">
        <ul>
            <router-link tag="li"  :to="'/home/photoinfo/'+item.id" v-for="item in list">
                <img v-lazy="item.img_url">
                <div class="imginfo">
                    <h4>{{item.seo_title}}</h4>
                    <p>{{item.zhaiyao}}</p>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "imglist",
        props:['list']
    }
</script>

<style scoped lang="scss">
.imglist{
    ul{
        margin: 0;
        padding: 0 10px 55px;
        li{
           list-style: none;
            margin-top: 10px;
            box-shadow: 0 0 8px rgba(0,0,0,.4);
            position: relative;
            img{
                width: 100%;
                vertical-align: middle;
            }
            .imginfo{
                position: absolute;
                bottom: 0;
                color: #FFFFFF;
                background-color: rgba(0,0,0,.5);
                height: 100px;
                overflow: hidden;
                h4{
                    text-align: center;
                    font-size: 15px;
                    font-weight: 100;
                    margin: 10px 0;
                }
                p{
                    color: #FFFFFF;
                    text-indent: 24px;
                }
            }
        }
    }
}
</style>
